<!-- /templates/customers/order.liquid -->
{% comment %}
  The 'layout settings.customer_layout' line is inserted at the top of every customer account template. Your theme's settings determine to use the 'default' or 'theme' customer templates.

  Template note:
    - All IDs on this template are required to make the form(s) submit properly

{% endcomment %}

{% layout settings.customer_layout %}

<h1>{{ 'customer.account.title' | t }}</h1>

<hr class="hr--small">

<p><a href="/account">{{ 'customer.account.return' | t }}</a></p>

<div class="grid">

  <div class="grid__item two-thirds medium-down--one-whole">
    <h4>{{ 'customer.order.title' | t: name: order.name }}</h4>

    <p>{{ 'customer.order.date' | t: date: order.created_at | date: "%B %d, %Y %I:%M%p" }}</p>

    {% if order.cancelled %}
      <div class="errors">
        {% assign cancelled_at = order.cancelled_at | date: "%B %d, %Y %I:%M%p" %}
        <p class="h5">{{ 'customer.order.cancelled' | t: date: cancelled_at }}</p>
        <p>{{ 'customer.order.cancelled_reason' | t: reason: order.cancel_reason }}</p>
      </div>
    {% endif %}

    <div class="table-wrap">
      <table class="full">
        <thead>
          <tr>
            <th>{{ 'customer.order.product' | t }}</th>
            <th>{{ 'customer.order.sku' | t }}</th>
            <th>{{ 'customer.order.price' | t }}</th>
            <th class="text-right">{{ 'customer.order.quantity' | t }}</th>
            <th class="text-right">{{ 'customer.order.total' | t }}</th>
          </tr>
        </thead>
        <tbody>
          {% for line_item in order.line_items %}
          <tr id="{{ line_item.id }}">
            <td>
              {{ line_item.title | link_to: line_item.product.url }}
              {% if line_item.fulfillment %}
                <div class="note">
                  {% assign created_at = line_item.fulfillment.created_at | date: format: 'month_day_year' %}
                  {{ 'customer.order.fulfilled_at' | t: date: created_at }}
                  {% if line_item.fulfillment.tracking_number %}
                    <a href="{{ line_item.fulfillment.tracking_url }}">{{ line_item.fulfillment.tracking_company }} #{{ line_item.fulfillment.tracking_number}}</a>
                  {% endif %}
                </div>
              {% endif %}
            </td>
            <td>{{ line_item.sku }}</td>
            <td>{{ line_item.price | money }}</td>
            <td class="text-right">{{ line_item.quantity }}</td>
            <td class="text-right">{{ line_item.quantity | times: line_item.price | money }}</td>
          </tr>
          {% endfor %}
        </tbody>
        <tfoot>
          <tr>
            <td colspan="4">{{ 'customer.order.subtotal' | t }}</td>
            <td class="text-right">{{ order.subtotal_price | money }}</td>
          </tr>

          {% for discount in order.discounts %}
            <tr class="order_summary discount">
              <td colspan="4">{{ discount.code }} {{ 'customer.order.discount' | t }}</td>
              <td class="text-right">{{ discount.savings | money }}</td>
            </tr>
          {% endfor %}

          {% for shipping_method in order.shipping_methods %}
          <tr>
            <td colspan="4">{{ 'customer.order.shipping' | t }} ({{ shipping_method.title }})</td>
            <td class="text-right">{{ shipping_method.price | money }}</td>
          </tr>
          {% endfor %}

          {% for tax_line in order.tax_lines %}
            <tr>
              <td colspan="4">{{ 'customer.order.tax' | t }} ({{ tax_line.title }} {{ tax_line.rate | times: 100 }}%)</td>
              <td class="text-right">{{ tax_line.price | money }}</td>
            </tr>
          {% endfor %}

          <tr>
            <td colspan="4"><strong>{{ 'customer.order.total' | t }}</strong></td>
            <td class="text-right"><strong>{{ order.total_price | money }} {{ order.currency }}</strong></td>
          </tr>
        </tfoot>
      </table>
    </div>

  </div>

  <div class="grid__item one-third medium-down--one-whole">

    <h4>{{ 'customer.order.billing_address' | t }}</h4>

    <p><strong>{{ 'customer.order.payment_status' | t }}:</strong> {{ order.financial_status_label }}</p>

    <h5>{{ order.billing_address.name }}</h5>
    <p>
      {% if order.billing_address.company != '' %}
        {{ order.billing_address.company }}<br>
      {% endif %}
      {{ order.billing_address.street }}<br>
      {{ order.billing_address.city }}<br>
      {% if order.billing_address.province != '' %}
        {{ order.billing_address.province }}<br>
      {% endif %}
      {{ order.billing_address.zip | upcase }}<br>
      {{ order.billing_address.country }}<br>
      {{ order.billing_address.phone }}
    </p>

    <h4>{{ 'customer.order.shipping_address' | t }}</h4>

    <p><strong>{{ 'customer.order.fulfillment_status' | t }}:</strong> {{ order.fulfillment_status_label }}</p>

    <h5>{{ order.shipping_address.name }}</h5>
    <p>
      {% if order.shipping_address.company != '' %}
        {{ order.shipping_address.company }}<br>
      {% endif %}
      {{ order.shipping_address.street }}<br>
      {{ order.shipping_address.city }}<br>
      {% if order.shipping_address.province != '' %}
        {{ order.shipping_address.province }}<br>
      {% endif %}
      {{ order.shipping_address.zip | upcase }}<br>
      {{ order.shipping_address.country }}<br>
      {{ order.shipping_address.phone }}
    </p>

  </div>

</div>
